<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的有声相册-小芳</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<style>
    body {
        background: url(images/bg1.jpg) no-repeat center center fixed;
        background-size: cover;
        font-size: 20px;
    }

    .box {
        margin: 10px auto;
        width: 600px;
        height: 500px;
    }

    .box img {
        margin: 10px auto;
        width: 600px;
        height: 400px;
        border-radius: 5px 40px;
    }

    .box audio {
        transition: all .25s .1s ease-out;
    }

    .box audio:hover {
        transform: translatex(200px);
        box-shadow: -40px 10px 30px #c40c0c9d;
    }

    video {
        width: 100%;
        height: 500px;
        margin-top: 10px;
    }

    .box1 {
        position: relative;
    }

    .box1 img {
        margin-left: 40px;
        border-radius: 20px;
        transition: all .25s .2s ease-out;
    }

    .box1 p {
        display: inline-block;
        position: absolute;
        background-color: #fff;
        border-radius: 20px;
        transition: all .8s .2s ease-out;
    }

    .box1:hover img {
        box-shadow: 10px 10px 30px #0f49c583;
    }

    .box1:hover p {
        transform: translatey(300px);
    }

    .box2 {
        position: relative;
        margin-top: 10px;
        width: 500px;
        height: 700px;
    }

    .box2 img {
        width: 100%;
        height: 100%;
        margin-left: 40px;
        border-radius: 20px;
        transition: all .25s .2s ease-out;
    }

    .box2 p {
        display: inline-block;
        position: absolute;
        top: 0;
        right: -89%;
        background-color: #fff;
        border-radius: 20px;
        transition: all .8s .2s ease-out;
    }

    .box2:hover img {
        box-shadow: 10px 10px 30px #0f49c583;
    }

    .box2:hover p {
        transform: translatey(400px);
    }

    .box3 {
        position: relative;
        margin-top: 10px;
        width: 500px;
        height: 700px;
    }

    .box3 img {
        width: 100%;
        height: 100%;
        margin-left: 40px;
        border-radius: 20px;
        transition: all .25s .2s ease-out;
    }

    .box3 p {
        display: inline-block;
        position: absolute;
        top: 0;
        right: -100%;
        background-color: #fff;
        border-radius: 20px;
        transition: all .8s .2s ease-out;
    }

    .box3:hover img {
        box-shadow: 10px 10px 30px #0f49c583;
    }

    .box3:hover p {
        transform: translatey(400px);
    }

    .box4 {
        position: relative;
        margin-top: 10px;
        width: 500px;
        height: 700px;
    }

    .box4 img {
        width: 100%;
        height: 100%;
        margin-left: 40px;
        border-radius: 20px;
        transition: all .25s .2s ease-out;
    }

    .box4 p {
        display: inline-block;
        position: absolute;
        top: 0;
        right: -72%;
        background-color: #fff;
        border-radius: 20px;
        transition: all .8s .2s ease-out;
    }

    .box4:hover img {
        box-shadow: 10px 10px 30px #0f49c583;
    }

    .box4:hover p {
        transform: translatey(400px);
    }
</style>

<body>
    <!-- 头部 -->
    <header>
        <em>MY AUDIO ALBUM</em>
        <ul>
            <li><a href="靓女.html" target="_blank">美女</a></li>
            <li><a href="型男.html" target="_blank">型男</a></li>
            <li><a href="科学家.html" target="_blank">科学家</a></li>
            <li><a href="https://gitee.com/hxxyyyyyy/shuzihuachengzhangkongjian.git">码云仓库</a></li>
        </ul>
    
    </header>
    <div class="w">
        <video src="video/花-风景图.mp4" controls="controls"></video>
        <div class="box">
            <img src="images/花-详情页.jpg">
            <audio src="media/邓紫棋-喜欢你.m4a" controls="controls"></audio>
        </div>
        <div>
            <div class="box1">
                <img src="images/j2.jpg" alt="">
                <p>
                    去年今日此门中，人面桃花相映红。
                    蒹葭苍苍，白露为霜。所谓伊人，在水一方
                </p>
            </div>
            <div class="box2">
                <img src="images/j5.jpg" alt="">
                <p>
                    美人既醉，朱颜酡些
                    脉脉眼中波，盈盈花盛处
                </p>
            </div>
            <div class="box3">
                <img src="images/j3.jpg" alt="">
                <p>邀人傅脂粉，不自著罗衣。清水出芙蓉，天然去雕饰</p>
            </div>
            <div class="box4">
                <img src="images/j4.jpg" alt="">
                <p>娴静犹如花照水，行动好比风扶柳。</p>
            </div>
            <div class="box4">
                <img src="images/源代码3.png" alt="">
                <p class="yuan">源代码</p>
            </div>
        </div>
    </div>
</body>

</html>